import {defineComponent} from "vue";
import {NButton, NCollapse, NCollapseItem, NTag} from "naive-ui";
import {requireImg} from "@utils/common/Image";
import SvgIcon from "@components/common/SvgIcon";

/**
 * AppIconView 应用图标页面组件
 */
export default defineComponent({
  name: "AppIconView",
  setup() {
    const plan1ImgArr1: Record<string, string> = import.meta.glob("@/assets/icons/icon/plan1/*.{png,svg,jpg,jpeg}", {
      eager: true,
    });
    const plan1ImgArr2: Record<string, string> = import.meta.glob("@/assets/icons/icon/plan2/*.{png,svg,jpg,jpeg}", {
      eager: true,
    });
    const plan1ImgArr3: Record<string, string> = import.meta.glob("@/assets/icons/icon/plan3/*.{png,svg,jpg,jpeg}", {
      eager: true,
    });
    const imageUrlArr1: string[] = [];
    for (const [key, _] of Object.entries(plan1ImgArr1)) {
      imageUrlArr1.push(key.replace("/src/assets/", ""));
    }
    const imageUrlArr2: string[] = [];
    for (const [key, _] of Object.entries(plan1ImgArr2)) {
      imageUrlArr2.push(key.replace("/src/assets/", ""));
    }
    const imageUrlArr3: string[] = [];
    for (const [key, _] of Object.entries(plan1ImgArr3)) {
      imageUrlArr3.push(key.replace("/src/assets/", ""));
    }
    const { copy } = useClipboard();

    return () => (
      <main class="flex flex-wrap justify-around items-center">
        <NTag class="mt-5" style={{ fontSize: "24px" }} type="success" size="large">
          系统应用图标使用方案
        </NTag>
        <NCollapse default-expanded-names="1" accordion>
          <NCollapseItem title="方案一" name="1">
            <div class="after:flex-auto flex flex-wrap justify-around items-center">
              {imageUrlArr1.map(item => {
                return (
                  <div class="flex flex-col justify-center items-center w-[280px] my-1.5 border border-black">
                    <div class="p-0.5 w-24 h-24 bg-gray-100 m-3 rounded-[14px]">
                      <img src={requireImg(item)} alt="" />
                    </div>
                    <NTag style={{ display: "flex", justifyContent: "center", alignItems: "center" }} size="small">
                      {item}
                      <NButton
                        style={{ marginLeft: "10px" }}
                        text
                        onClick={async () => {
                          await copy(item);
                          window.$message.success("复制成功");
                        }}
                      >
                        <SvgIcon icon="bx:copy-alt" color="#000" />
                      </NButton>
                    </NTag>
                  </div>
                );
              })}
            </div>
          </NCollapseItem>
          <NCollapseItem title="方案二" name="2">
            <div class="after:flex-auto flex flex-wrap justify-around items-center">
              {imageUrlArr2.map(item => {
                return (
                  <div class="flex flex-col justify-center items-center w-[300px] p-1.5 m-1.5 border border-black">
                    <div class="p-0.5 w-24 h-24 bg-black/50 m-3 rounded-[14px]">
                      <img src={requireImg(item)} alt="" />
                    </div>
                    <NTag style={{ display: "flex", justifyContent: "center", alignItems: "center" }}>
                      {item}
                      <NButton
                        style={{ marginLeft: "10px" }}
                        text
                        onClick={async () => {
                          await copy(item);
                          window.$message.success("复制成功");
                        }}
                      >
                        <SvgIcon icon="bx:copy-alt" color="#000" />
                      </NButton>
                    </NTag>
                  </div>
                );
              })}
            </div>
          </NCollapseItem>
          <NCollapseItem title="方案3" name="3">
            <div class="after:flex-auto flex flex-wrap justify-around items-center">
              {imageUrlArr3.map(item => {
                return (
                  <div class="flex flex-col justify-center items-center w-[300px] p-1.5 m-1.5 border border-black">
                    <div class="p-0.5 w-24 h-24 bg-black/50 m-3 rounded-[14px]">
                      <img src={requireImg(item)} alt="" />
                    </div>
                    <NTag style={{ display: "flex", justifyContent: "center", alignItems: "center" }}>
                      {item}
                      <NButton
                        style={{ marginLeft: "10px" }}
                        text
                        onClick={async () => {
                          await copy(item);
                          window.$message.success("复制成功");
                        }}
                      >
                        <SvgIcon icon="bx:copy-alt" color="#000" />
                      </NButton>
                    </NTag>
                  </div>
                );
              })}
            </div>
          </NCollapseItem>
        </NCollapse>
      </main>
    );
  },
});
